{php}$title= '板块管理';{/php}
{include file="layout/header"}
<!--页面主要内容-->
<main class="lyear-layout-content">
    <div class="container-fluid p-t-15">
        <div class="row">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-body">
                        <div id="toolbar" class="toolbar-btn-action">
                            <button type="button" data-toggle="modal" data-target="#exampleModal" class="btn btn-primary m-r-5">
                                <span class="mdi mdi-plus" aria-hidden="true"></span>新增
                            </button>
                            <button id="btn_delete" type="button" class="btn btn-danger">
                                <span class="mdi mdi-window-close" aria-hidden="true"></span>删除
                            </button>
                        </div>
                        <div class="input-group mb-3">
                            <input type="text" name="search_platename" id="search_platename" class="form-control" placeholder="板块名称">
                            <div class="input-group-append">
                                <input type="button" id="search_btn" class="input-group-text" value="查询">
                            </div>
                        </div>

                        <table id="tb_departments"></table>
                    </div>
                </div>
            </div>
            <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h6 class="modal-title" id="exampleModalLabel">新增板块</h6>
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                        </div>
                        <div class="modal-body">
                            <div class="form-group" >
                                <label for="platename">板块名称</label>
                                <input type="text" class="form-control" id="platename" placeholder="请输入板块名称">
                            </div>
                            <div class="form-group file-group">
                                <label for="plateicon">icon图标</label>
                                <div class="input-group">
                                    <input type="text" id="plateicon" class="form-control file-value" name="web_site_logo" value="" placeholder="icon图标">
                                    <input type="file" accaccept=".png,.jpg,.jpeg,.bmp,.gif" style="display: none">
                                    <div class="input-group-btn">
                                        <button class="btn btn-default file-browser" type="button">上传图片</button>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group" >
                                <label for="appid">appid</label>
                                <input type="text" class="form-control" id="appid" placeholder="请输入应用id">
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" id="shutdown" data-dismiss="modal">关闭</button>
                            <button type="button" id="addbtn" onclick="addplate()" class="btn btn-primary">保存</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</main>
<!--End 页面主要内容-->
</div>
</div>
{include file="layout/footer"}
<script>
    $('#tb_departments').bootstrapTable({
        classes: 'table table-bordered table-hover table-striped',
        url: "{:url('bbs/getplatelist')}",
        method: 'get',
        dataType : 'json',
        uniqueId: 'id',
        idField: 'id',             // 每行的唯一标识字段
        toolbar: '#toolbar',       // 工具按钮容器
        clickToSelect: true,     // 是否启用点击选中行
        showColumns: true,         // 是否显示所有的列
        showRefresh: true,         // 是否显示刷新按钮

        showToggle: true,        // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)

        pagination: true,                    // 是否显示分页
        sortOrder: "desc",                    // 排序方式
        queryParams: function(params) {
            var temp = {
                limit: params.limit,         // 每页数据量
                offset: params.offset,       // sql语句起始索引
                page: (params.offset / params.limit) + 1,
                sort: params.sort,           // 排序的列名
                sortOrder: params.order,      // 排序方式'asc' 'desc'
                platename: $('#search_platename').val()
            };
            return temp;
        },                                   // 传递参数
        sidePagination: "server",            // 分页方式：client客户端分页，server服务端分页
        pageNumber: 1,                       // 初始化加载第一页，默认第一页
        pageSize: 10,                        // 每页的记录行数
        pageList: [10, 25, 50, 100],         // 可供选择的每页的行数
        //search: true,                      // 是否显示表格搜索，此搜索是客户端搜索

        showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
        exportDataType: "basic", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据

        columns: [{
            field: 'example',
            checkbox: true    // 是否显示复选框
        }, {
            field: 'id',
            title: 'id',
            sortable: true    // 是否排序
        }, {
            field: 'platename',
            title: '板块名称',
        }, {
            field: 'plateicon',
            title: '板块icon',
            formatter:function(value, row, index){
                value="<img src='"+row.plateicon+"' style='width:50px;height:50px;border-radius: 15px;'/>";
                return value;
            }
        },{
            field: 'appname',
            title: '应用名称',
        }, {
            field: 'creattime',
            title: '创建时间',
        }, {
            field: 'operate',
            title: '操作',
            formatter: btnGroup,  // 自定义方法
            events: {
                'click .edit-btn': function (event, value, row, index) {
                  window.location.href = "{:url('bbs/queryplate')}?id="+row.id;
                },
                'click .del-btn': function (event, value, row, index) {
                    deleteplate(row.id);
                }
            }
        }],
        onLoadSuccess: function(data){
            $("[data-toggle='tooltip']").tooltip();
        }
    });

    // 操作按钮
    function btnGroup ()
    {
        let html =
            '<a href="#!" class="btn btn-xs btn-default m-r-5 edit-btn" title="编辑" data-toggle="tooltip"><i class="mdi mdi-pencil"></i></a>' +
            '<a href="#!" class="btn btn-xs btn-default del-btn" title="删除" data-toggle="tooltip"><i class="mdi mdi-window-close"></i></a>';
        return html;
    }

    //搜索
    $('#search_btn').click(function (){
        //ajax查询
        $.ajax({
            type: "POST",
            url: "{:url('bbs/getplatelist')}",
            data: {
                platename: $.trim($('#search_platename').val()),
            },
            dataType: "json",
            success: function (data) {
                $('#tb_departments').bootstrapTable('load', data);
            }
        });
    });

    //获取选中的id
    function getnumber() {
        var selRows = $('#tb_departments').bootstrapTable("getSelections");
        if(selRows.length == 0){
            $.notify({
                message: "请至少选择一行"
            },{
                placement: {
                    from: "top",
                    align: "center"
                },
                // settings
                type: 'danger'
            });
            return false;
        }
        var postData = "";
        $.each(selRows,function(i) {
            postData +=  this.id;
            if (i < selRows.length - 1) {
                postData += ",";
            }
        });
        return postData;
    }

    //添加应用
    function addplate() {
        $("#addbtn").attr('disable', 'true');
        var l = $("#addbtn").lyearloading({
            opacity: 0.2,
            spinnerSize: 'nm'
        });
        var platename = $.trim($("#platename").val());
        var plateicon = $.trim($("#plateicon").val());
        var appid = $.trim($("#appid").val());
        $.ajax({
            type: "POST",
            url: "{:url('bbs/addplate')}",
            data: {
                platename: platename,
                plateicon: plateicon,
                appid: appid,
            },
            dataType: "json",
            success: function (data) {
                $("#shutdown").click();
                setTimeout(function () {
                    l.destroy();}, 1e3)
                if (data.code == 200){
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        type: 'success'
                    });
                    $('#tb_departments').bootstrapTable('refresh');
                }else{
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        // settings
                        type: 'danger'
                    });
                }
            }
        })
    };

    //删除应用
    function deleteplate(id){
        var l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        $.ajax({
            type: "POST",
            url: "{:url('bbs/deleteplate')}",
            data: {
                id: id,
            },
            dataType: "json",
            success: function (data) {
                setTimeout(function() {
                    l.destroy();
                }, 1e3)
                if (data.code == 200) {
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        type: 'success'
                    });
                    setTimeout("location.reload();", 2000);
                } else {
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        // settings
                        type: 'danger'
                    });
                }
            },
        });
    }


    $("#btn_delete").click(function () {
        var getnum = getnumber();
        //console.log(getnum);
        if (getnum == false){
            return false;
        }
        var l = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            spinnerText: '后台处理中，请稍后...',
            textColorClass: 'text-info',
            spinnerColorClass: 'text-info'
        });
        $.ajax({
            type: "POST",
            url: "{:url('bbs/deleteplate')}",
            data: {
                id: getnum
            },
            dataType: "json",
            success: function (data) {
                setTimeout(function() {
                    l.destroy();
                }, 1e3)
                if (data.code == 200) {
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        type: 'success'
                    });
                    setTimeout("location.reload();", 2000);
                } else {
                    $.notify({
                        message: data.msg
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        type: 'danger'
                    });
                }
            },
        });
    });

    $(document).ready(function() {
        $(document).on('click', '.file-browser', function() {
            var $browser = $(this);
            var file = $browser.closest('.file-group').find('[type="file"]');
            file.on( 'click', function(e) {
                e.stopPropagation();
            });
            file.trigger('click');
        });

        $(document).on('change', '.file-group [type="file"]', function() {
            var l = $('body').lyearloading({
                opacity: 0.2,
                spinnerSize: 'lg',
                spinnerText: '后台处理中，请稍后...',
                textColorClass: 'text-info',
                spinnerColorClass: 'text-info'
            });
            var $this    = $(this);
            var $input   = $(this)[0];
            var $len     = $input.files.length;
            var formFile = new FormData();

            if ($len == 0) {
                return false;
            } else {
                var fileAccaccept = $this.attr('accaccept');
                var fileType      = $input.files[0].type;
                var type          = (fileType.substr(fileType.lastIndexOf("/") + 1)).toLowerCase();

                if (!type || fileAccaccept.indexOf(type) == -1) {
                    $.notify({
                        message: '您上传图片的类型不符合(.jpg|.jpeg|.gif|.png|.bmp)',
                    },{
                        placement: {
                            from: "top",
                            align: "center"
                        },
                        type: 'success'
                    });
                    l.destroy();
                    return false;
                }
                formFile.append("file", $input.files[0]);
            }

            var data = formFile;

            $.ajax({
                url: "{:url('index/upload')}",
                data: data,
                type: "POST",
                dataType: "json",
                //上传文件无需缓存
                cache: false,
                //用于对data参数进行序列化处理 这里必须false
                processData: false,
                //必须
                contentType: false,
                success: function (res) {
                    setTimeout(function() {
                        l.destroy();
                    }, 1e3)
                    if (res.code == 200) {
                        $.notify({
                            message: res.msg
                        },{
                            placement: {
                                from: "top",
                                align: "center"
                            },
                            type: 'success'
                        });
                        //console.log(res.data[0].filePath);
                        $this.closest('.file-group').find('.file-value').val(res.data.fullPath);
                    } else {
                        $.notify({
                            message: "系统错误"
                        },{
                            placement: {
                                from: "top",
                                align: "center"
                            },
                            // settings
                            type: 'danger'
                        });
                    }
                },
            });
        });
    });

</script>

</body>

</html>
